<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div
                class="score-lottery-dialog"
                v-if="dialogStore.isScoreLotteryDialogVisible"
            >
                <div class="score-lottery-dialog__mask" @click="onClose"></div>
                <div class="score-lottery-dialog__content">
                    <div class="score-lottery-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>

                    <div class="score-lottery-dialog__title">
                        <img
                            :src="`${_oss_}images/dialog/score-lottery/icon-title.png`"
                        />
                    </div>

                    <div class="score-lottery-box">
                        <div
                            :class="[
                                item.type === 'thanks'
                                    ? 'score-lottery-thanks'
                                    : 'score-lottery-item',
                                { active: lotteryActive === index },
                            ]"
                            :style="[
                                { order: item.order },
                                item.order % 3 === 0 ? 'margin-right: 0' : '',
                            ]"
                            v-for="(item, index) in lotteryMap"
                            :key="item.order"
                        >
                            <img
                                :src="
                                    _oss_ +
                                    'images/dialog/score-lottery/icon-' +
                                    item.type +
                                    '.png'
                                "
                            />
                            <div
                                class="score-lottery-text"
                                v-if="
                                    item.type === 'vip' || item.type === 'score'
                                "
                            >
                                {{ item.value
                                }}{{ item.type === "vip" ? "天会员" : "积分" }}
                            </div>
                        </div>
                        <div
                            class="score-lottery-start"
                            :style="{ order: 5 }"
                            @click="onStart"
                        >
                            <img
                                :src="`${_oss_}images/dialog/score-lottery/icon-start.png`"
                            />
                            <div class="score-lottery-text">（100积分）</div>
                        </div>
                    </div>

                    <div class="score-littery-num">
                        我的积分：{{ userStore.midNum.score_num }}
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { useContent } from ".";
const dialogStore = useDialogStore();
const userStore = useUserStore();

const { lotteryMap, lotteryActive, onClose, onStart, GetLottery } =
    useContent();
await GetLottery();
</script>
<style lang="scss" scoped>
.score-lottery-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 800px;
        height: 850px;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/bg.jpg");
        background-size: 100% 100%;
        transform: translate(-50%, -50%) scale(0.75);
        border-radius: 10px;
    }

    &__title {
        position: absolute;
        top: 37px;
        left: 50%;
        transform: translateX(-50%);
    }

    .score-lottery-box {
        display: flex;
        flex-wrap: wrap;
        width: 600px;
        height: 600px;
        padding: 35px;
        margin: 112px auto 0;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/score-lottery-bg.png");

        .score-lottery-start {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 170px;
            height: 170px;
            margin-right: 10px;
            margin-top: 10px;
            background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/icon-start-bg.png");
            cursor: pointer;
            user-select: none;

            img {
                width: 89px;
            }

            .score-lottery-text {
                font-size: 20px;
                margin-top: 5px;
                color: #fff;
            }
        }

        .score-lottery-item,
        .score-lottery-thanks {
            width: 170px;
            height: 170px;
            margin-right: 10px;
            margin-top: 10px;
            background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/icon-default-bg.png");
            user-select: none;

            &.active {
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/icon-active-bg.png");
            }

            &:nth-of-type(1),
            &:nth-of-type(2),
            &:nth-of-type(3) {
                margin-top: 0;
            }
        }

        .score-lottery-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 85px;
            }

            .score-lottery-text {
                margin-top: 14px;
                color: #d37713;
                font-size: 20px;
                font-weight: 600;
            }
        }

        .score-lottery-thanks {
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 117px;
            }
        }
    }

    &__close {
        position: absolute;
        right: 40px;
        top: 36px;
        cursor: pointer;

        img {
            width: 40px;
            height: 40px;
        }
    }

    .score-littery-num {
        width: 319px;
        height: 79px;
        margin: 35px auto 0;
        color: #cc4d1c;
        font-size: 26px;
        font-weight: 600;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/btn-bg.png");
        padding-top: 22px;
        text-align: center;
        cursor: pointer;
        user-select: none;
    }
}
</style>
